import React, { useEffect, useState } from 'react'
import { Button, Card, Descriptions } from "antd"
import { useNavigate, useParams } from 'react-router-dom'

import {getHospitalListByIdRequest} from "@api/hospital/hospitalList"

import type {getHosListByIdReqReturn} from "@api/hospital/model/hospitalListType"

export default function HospitalShow() {

  //返回医院列表页面
  const navigate = useNavigate()

  //拿到医院列表中点击查看传过来的id
  const { id } = useParams()

  //定义状态保存医院详情信息
  const [hospitalList , setHospitallist] = useState<getHosListByIdReqReturn>({})

  console.log(hospitalList);
  



  //1.初始化根据对应的id请求相应的医院详情数据渲染
  useEffect(() => {
    ( async () => {
      //请求医院详情信息
      //id有可能是undefined 所以断言为string
      const result = await getHospitalListByIdRequest(id as string)

      //把医院详情信息保存在状态中
      setHospitallist(result)

    })()
  }, [])


  //2.点击返回的回调函数
  const goBackHandel = () => {
    //返回医院列表页面
    navigate(-1)
  }


  return (
    <div>
      <Card>

        {/* 
            hospitalList上的两个属性是可选 所以读取这两个属性的时候用
            可选链操作符? 如果没读取到就不执行 读取到了才继续执行
        */}
        <Descriptions title="基本信息" bordered column={2}>

          <Descriptions.Item label="医院名称">
            {hospitalList.hospital?.hosname}
          </Descriptions.Item>

          <Descriptions.Item label="医院logo">
            {
              (hospitalList.hospital?.logoData) ?  //如果找到这个图片就渲染 
              <img width={140} src={`data:image/jpeg;base64,${hospitalList.hospital?.logoData}`} alt="医院logo" />
              : ''   //找不到就返回空串
            }
          </Descriptions.Item>

          <Descriptions.Item label="医院编码">
            {hospitalList.hospital?.hoscode}
          </Descriptions.Item>

          <Descriptions.Item label="医院地址">
            {hospitalList.hospital?.param.fullAddress}
          </Descriptions.Item>

          <Descriptions.Item label="坐车路线" span={2}>
            {hospitalList.hospital?.route}
          </Descriptions.Item>

          <Descriptions.Item label="医院简介" span={2}>
            {hospitalList.hospital?.intro}
          </Descriptions.Item>
        </Descriptions>

        <Descriptions title="预约规则信息" bordered column={2} style={{ marginTop: 20 }}>
          <Descriptions.Item label="预约周期">
            {hospitalList.bookingRule?.cycle}
          </Descriptions.Item>

          <Descriptions.Item label="放号时间">
            {hospitalList.hospital?.createTime}
          </Descriptions.Item>

          <Descriptions.Item label="停挂时间">
            {hospitalList.bookingRule?.stopTime}
          </Descriptions.Item>

          <Descriptions.Item label="退号时间">
            {hospitalList.bookingRule?.quitTime}
          </Descriptions.Item>

          <Descriptions.Item label="预约规则" span={2}>
            {hospitalList.bookingRule?.rule[0]}
          </Descriptions.Item>
        </Descriptions>

        <Button style={{ marginTop: 30 }} onClick = {goBackHandel}>返回</Button>

      </Card>
    </div>
  )
}
